<template>
    <el-dialog :model-value="true" title="商品详情" width="80%" :close-on-click-modal="false" append-to-body @close="() => emits('close')">
        <div class="pizza-detail">
            <div class="pizza-image">
                <img src="https://placehold.co/600x400" alt="夏威夷风情可可熔岩芝士流心卷边比萨">
            </div>
            <div class="pizza-info">
                <h2>夏威夷风情可可熔岩芝士流心卷边比萨</h2>
                <p>进口菠萝和火腿片组合，全球人气！</p>
                <p>配料：火腿、菠萝、马苏里拉芝士</p>
                <div class="size-selection">
                    <h3>尺寸(可选)</h3>
                    <div class="info-text">尺寸：{{ selectedSize }}"</div>
                </div>
                <div class="crust-selection">
                    <h3>饼底</h3>
                    <div class="info-text">{{ selectedCrust }}</div>
                </div>
                <div class="sauce-selection">
                    <h3>底酱</h3>
                    <div class="info-text">{{ selectedSauce }}</div>
                </div>
                <div class="ingredients">
                    <h3>基础配料(可选)</h3>
                    <div class="info-text">{{ selectedIngredients.join('、') }}</div>
                </div>
                <div class="additional-ingredients">
                    <h3>附加配料(可选)</h3>
                    <div class="info-text" v-if="selectedAdditionalIngredients.length > 0">
                        {{ selectedAdditionalIngredients.join('、') }}
                    </div>
                    <div class="info-text" v-else>暂无附加配料</div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
const emits = defineEmits(['close', 'success'])

const selectedSize = ref('9、12')
const selectedCrust = ref('可可熔岩芝士流心卷边')
const selectedSauce = ref('经典番茄比萨酱')
const selectedIngredients = ref(['马苏里拉芝士', '菠萝', '方形火腿片'])
const selectedAdditionalIngredients = ref(['烟熏鸡肉丁', '玉米', '薯角', '虾仁', '西兰花', '金枪鱼', '金枪鱼', '青椒', '脆嫩烤虾仁', '培根', '意式香肠丁', '意式香肠片', '樱桃番茄', '浓香鸡块', '臻品菌菇'])
</script>

<style scoped>
.pizza-detail {
    /* display: flex; */
}

.pizza-image {
    flex: 1;
    text-align: center;
}

.pizza-info {
    flex: 2;
    padding-left: 20px;
}

.size-selection,
.crust-selection,
.sauce-selection,
.ingredients,
.additional-ingredients {
    margin-bottom: 20px;
}
</style>